<template>
	<view class="content">
		二维码地址：
		<input class="input" v-model="url" />
		<button @click="chooseImage" class="button">选择背景logo</button>
		<image :src="result" mode="widthFix"></image>
	</view>
</template>

<script>
	
	// import {
	//     encodeData,
	//     rendererResImage,
	// } from 'beautify-qrcode';
	import beautifyQrcode from '../../static/beautify-qrcode.js'
	// import * as QrCode from '../../static/beautify-qrcode.js'
	// let { encodeData, rendererResImage } = beautifyQrcode()
	let qrCode = beautifyQrcode()
	import { Base64 } from 'js-base64';
	export default {
		data() {
			return {
				url: 'https://www.baidu.com',
				result: ''
			}
		},
		onLoad() {

			 // encodeData = qrCode.encodeData
			 // rendererResImage = qrCode.rendererResImage
			 
		},
		methods: {
			async chooseImage () {
				let res = await uni.chooseImage({
					count: 1
				})
				if (!res.tempFilePaths) {
					return
				}
				console.log(res)
				let tempFilePath = res.tempFilePaths[0]
				const qrcode = qrCode.encodeData({
				    text: this.url || 'https://www.baidu.com',
				    correctLevel: 2, // 容错率 1=>7% 0 =>15% 3=>25% 2=>30%
				});
				uni.showLoading({
					title: '生成中'
				})
				qrCode.rendererResImage(qrcode, {
					backgroudImage: tempFilePath
				}).then(base64Svg => {
					this.result= `data:image/svg+xml;base64,` + Base64.encode(base64Svg);
					uni.hideLoading()
				}).catch(e => {
					uni.hideLoading()
					console.log(e)
				});
				
			}
		}
	}
</script>

<style>
	.content {
		padding: 200rpx 32rpx 0 32rpx;
	}
	.input {
		padding: 16rpx 32rpx;
		border: solid 1px gray;
		color: black;
		margin-top: 8rpx;
	}
	.button {
		margin-top: 32rpx;
	}
</style>
